<template>
    <view class="content">
		<view class="create" @click="$gTo(`/pages/settlement-xh/list`)">添加</view>
		
        <view class="box">
			<view class="send" v-for="(item, index) in costList" :key="index">
			    <view>
			        <view class="send-i">
			            <view class="send-l">车牌号</view>
			            <view class="u-flex-1">{{item.number}}</view>
			        </view>
			        <view class="send-i">
			            <view class="send-l">发货日期</view>
			            <view class="u-flex-1">{{item.start_date}}</view>
			        </view>
					<view class="send-i" v-if="item.out_trade_no">
					    <view class="send-l">运单号</view>
					    <view class="u-flex-1">{{item.out_trade_no}}</view>
					</view>
			        <view class="send-i" v-for="(el, ind) in item.cost_items" :key="ind">
			            <view class="send-l">{{el.item}}</view>
			            <view class="u-flex-1">{{el.items}} {{el.cost}}元 {{el.num}}{{el.unit}}</view>
			        </view>
			        <view class="send-i">
			            <view class="send-l">录入日期</view>
			            <view class="u-flex-1">{{item.create_time}}</view>
			        </view>
			    </view>
				
				<image src="../../static/icon/del.png" class="del-icon" @click="del(index)"></image>
			</view>
            
            <view class="item">
                <view class="grey">收款人</view>
                <view class="u-flex-1">
					<view class="inp2 u-m-b-10" @click="show = true">{{ bankName || '请选择' }}</view>
                    <!-- <input type="text" v-model="name" placeholder="请输入" class="inp2"> -->
					<textarea v-model="name" placeholder="请输入" class="t-inp" :auto-height="true"></textarea>
                </view>
            </view>
            <view class="item">
                <view class="grey">开户行</view>
                <view class="item-r">
                    <input type="text" v-model="bank" placeholder="请输入" class="inp">
                </view>
            </view>
            <view class="item">
                <view class="grey">账号</view>
                <view class="item-r">
                    <input type="text" v-model="num" placeholder="请输入" class="inp">
                </view>
            </view>
        </view>
        
        <view class="box2">
            <view class="item">
                <view class="grey">合计金额</view>
                <view class="item-r text-bold">￥{{money}}</view>
            </view>
        </view>
        
        <view class="footer">
            <view></view>
            <view class="btn" @click="$noMultipleClicks(doSubmit)">去结算</view>
        </view>
		
		<u-popup mode="bottom" v-model="show">
		    <view class="popup">
		        <u-search placeholder="请输入收款人" v-model="keyword" :show-action="false" @search="doSearch"></u-search>
		        <scroll-view scroll-y="true" style="height: 500rpx;">
		            <view>
		                <view class="popup-item" v-for="(item, index) in optionList" :key="index"
		                    :class="{active : item.isSelect}" @click="choose(item)">
		                    {{item.bank}} - {{item.name}}
		                </view>
		            </view>
					<view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="optionList.length == 0">暂无相关信息</view>
		        </scroll-view>
		        <view class="pop-btn" @click="confirmGood">确定</view>
		    </view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick: true,//连点
				costList: [],
				show: false,
				optionList: [],//收款人
				keyword: '',
				bankName: '',//选择收款人
				bankId: '',
				name: '',//输入收款人
				bank: '',//开户行
				num: '',//账号
				money: 0,//合计金额
            };
        },
        onLoad() {
            this.getOption()
        },
		onShow(){
		    // 接收 添加结算单监听
		    uni.$once('CHOOSE_COST_LIST', (data) => {
		        console.log('data',data)
		        let list = data.arr
		        if (this.costList && this.costList.length <= 0) {
		            console.log('1111111')
		            this.costList = list
		        } else {
		            console.log('2222222')
		            this.costList.forEach((cur, index) => {
		                list.forEach((el, eli) => {
		                    if (cur.id == el.id) {
		                        list.splice(eli, 1)
		                    }
		                })
		            })
		            this.costList = [...this.costList, ...list]
		        }
		        this.blur()
		        console.log('this.costList',this.costList)
		    })
		},
		onUnload() {
		    uni.$off('CHOOSE_COST_LIST')
		},
        methods: {
			doSubmit() {
				if (this.costList.length <= 0) {
					this.$toast('请选择结算单');
					return
				}
				let ids = []
				this.costList.forEach(cur => {
					ids.push(cur.id)
				})
				if (!this.bankId && !this.name) {
					this.$toast('请选择或输入收款人');
					return
				}
				if (!this.bank) {
					this.$toast('请输入开户行');
					return
				}
				if (!this.num) {
					this.$toast('请输入账号');
					return
				}
				
				this.$ajax('insert_settlement_doc', {
					user_token: this.$getSync('userToken'),
					cost_ids: ids.join(','),//费用单id，分割字符串
					receiving_id: this.bankId,//收款人id
					name: this.name,//收款人
					bank: this.bank,//开户行
					account: this.num,//账号
				}).then(ret => {
					if (ret.success == 1000) {
						this.$toast('提交成功');
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			// 选择收款人
			choose(item) {
				const nowStatu = item.isSelect
				this.optionList.forEach(ii => {
				    ii.isSelect = false
				})
				item.isSelect =! nowStatu
			},
			confirmGood() {
			    if (this.optionList && this.optionList.length > 0) {
			        this.optionList.forEach(cur => {
			            if (cur.isSelect) {
							this.bankName = cur.name
							this.bankId = cur.id
							this.name = cur.name
							this.bank = cur.bank
							this.num = cur.account
			            }
			        })
			    }
			    this.show = false
			},
			// 搜索收款人
			doSearch() {
			    this.getOption()
			},
			
			// 获取收款人选项
			getOption() {
				this.$ajax('receiving_option', {
					user_token: this.$getSync('userToken'),
					name: this.keyword,
				}).then(ret => {
					if (ret.success == 1000) {
						this.optionList = ret.detail&&ret.detail.receiving
						if (this.optionList && this.optionList.length > 0) {
							this.optionList.forEach(cur => {
								this.$set(cur, 'isSelect', false)
							})
						}
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			// 删除
			del(index) {
			    this.costList.splice(index, 1)
				this.blur()
			},
			
			// 计算合计金额
			blur() {
				this.money = 0
				this.costList.forEach(cur => {
					this.money = Number(this.money) + Number(cur.cost)
				})
			},
        }
    };
</script>

<style lang="scss">
	.popup{
	    padding: 24rpx;
	}
	.popup-item{
	    padding: 20rpx 0;
	    text-align: center;
	}
	.active{
	    font-weight: bold;
	    color: #00a1e9;
	}
	.pop-btn{
	    color: #fff;
	    background-color: #00a1e9;
	    padding: 20rpx;
	    text-align: center;
	    margin: 20rpx;
	    border-radius: 50rpx;
	}
	
	.create{
		width: 200rpx;
		height: 70rpx;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		background-color: #51b5f7;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
    .del-icon{
		width: 57rpx;
		height: 57rpx;
	}
    
    page{
        background-color: #eef1f6;
    }
    .content{
        padding: 20rpx 20rpx 100px;
    }
    
    .nav2{
        padding-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav2-r{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #737373;
    }
    .time{
        width: 230rpx;
        height: 64rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
        margin-left: 12rpx;
        padding: 15rpx;
        background-color: #fff;
        border-radius: 10rpx;
    }
    .time-icon{
        width: 25rpx;
        height: 25rpx;
        margin-left: 20rpx;
    }
    
    .box{
        padding: 35rpx 30rpx 5rpx;
        margin-bottom: 15rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    .box2{
        padding: 0 30rpx;
        margin-bottom: 15rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }
    .send{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 30rpx 25rpx;
        background-color: #f5f7fa;
        border-radius: 15rpx;
        margin-top: 15rpx;
    }
    .send-i{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        color: #3a4a6e;
    }
    .send-l{
        width: 140rpx;
		padding-right: 20rpx;
    }
    .choose{
        width: 31rpx;
        height: 31rpx;
        margin-left: 10rpx;
    }
    
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
    }
    .grey{
        color: #656565;
    }
    .item-r{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .inp{
        flex: 1;
        text-align: right;
		font-size: 28rpx;
    }
	.t-inp{
		width: 95%;
		min-height: 100rpx;
		height: auto;
		// flex: 1;
		font-size: 28rpx;
		background-color: #f5f7fa;
		border-radius: 10rpx;
		padding: 15rpx;
		margin-left: 20rpx;
	}
    .inp2{
		width: 95%;
		font-size: 28rpx;
        // flex: 1;
        background-color: #f5f7fa;
        border-radius: 10rpx;
        // height: 65rpx;
		// line-height: 65rpx;
        padding: 15rpx;
        margin-left: 20rpx;
  //       text-align: right;
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
    }
    
    .footer{
        width: 100%;
        height: 110rpx;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;
        position: fixed;
        left: 0;
        bottom: 0;
    }
    .price{
        color: #ff3f00;
    }
    .price>text{
        font-size: 38rpx;
    }
    .btn{
        color: #fff;
        padding: 18rpx 60rpx;
        background-color: #00457f;
        border-radius: 50rpx;
    }

</style>
